<template>
	<view class="tabbar">
		<view class="tabbar-item" @click="handleRoute('/pages/index/index')">
			<view class="item-icon">
				<u-icon name="rmb-circle-fill" color="#FC630E" size="20" v-if="slectIndex===0"></u-icon>
				<u-icon name="rmb-circle" color="#333" size="20" v-else></u-icon>
			</view>
			<view :class="`item-text ${slectIndex===0?'activeText':''}`">
				买单
			</view>
		</view>
		<!-- <view class="tabbar-circle" @click="handleOfferShow">
			<view class="circle-wai">

			</view>
			<view class="circle">优惠</view>

		</view> -->
		<view class="tabbar-item" @click="handleRoute('/pages/youhui/youhui')">
			<view class="item-icon">
				<u-icon name="coupon-fill" color="#FC630E" size="20" v-if="slectIndex===1"></u-icon>
				<u-icon name="coupon" color="#333" size="20" v-else></u-icon>
			</view>
			<view :class="`item-text ${slectIndex===1?'activeText':''}`">
				优惠
			</view>
		</view>
		<!-- <view class="tabbar-item" @click="handleRoute('/pages/shop/shop')">
			<view class="item-icon">
				<u-icon name="integral-fill" color="#FC630E" size="20" v-if="slectIndex===2"></u-icon>
				<u-icon name="integral" color="#333" size="20" v-else></u-icon>
			</view>
			<view :class="`item-text ${slectIndex===2?'activeText':''}`">
				商城
			</view>
		</view> -->
		<view class="tabbar-item" @click="handleRoute('/pages/order/order')">
			<view class="item-icon">
				<u-icon name="integral-fill" color="#FC630E" size="20" v-if="slectIndex===2"></u-icon>
				<u-icon name="integral" color="#333" size="20" v-else></u-icon>
			</view>
			<view :class="`item-text ${slectIndex===2?'activeText':''}`">
				订单
			</view>
		</view>
		<view class="tabbar-item" @click="handleRoute('/pages/user/user')">
			<view class="item-icon">
				<u-icon name="account-fill" color="#FC630E" size="20" v-if="slectIndex===3"></u-icon>
				<u-icon name="account" color="#333" size="20" v-else></u-icon>
			</view>
			<view :class="`item-text ${slectIndex===3?'activeText':''}`">
				我的
			</view>
		</view>
		<Offfer :show="showOffer" @cancle="handleClose"></Offfer>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import Offfer from "../offer/offer.vue"
	const props = defineProps({
		slectIndex: Number
	})

	const handleRoute = (data) => {
		uni.switchTab({
			url: data
		})
	}
	const showOffer = ref(false)
	const handleOfferShow = () => {
		showOffer.value = true
	}
	const handleClose = () => {
		showOffer.value = false
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		z-index: 10;
		padding-bottom: 20rpx;
		// padding-bottom:calc(10rpx + constant(safe-area-inset-bottom)); 
		// padding-bottom:calc(10rpx + env(safe-area-inset-bottom)); 
		height: 120rpx;
		background-color: #fff;
		border-top: 1px solid #DDDDDD;

		.tabbar-item {
			width: 33.33%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-direction: column;
			position: relative;

			.item-text {
				font-size: 20rpx;
				margin-top: 10rpx;
				color: #2E2D2D;
			}

			.activeText {
				color: #ED2920;
			}

		}

		.tabbar-circle {
			width: 33.33%;
			position: relative;

			.circle-wai {
				position: absolute;
				width: 120rpx;
				height: 100rpx;
				background-color: #fff;
				top: -20rpx;
				left: 50%;
				margin-left: -60rpx;
				border-radius: 60rpx / 50rpx;
				// z-index: 8;
			}

			.circle {
				position: absolute;
				width: 90rpx;
				height: 90rpx;
				top: -10rpx;
				left: 50%;
				z-index: 9;
				margin-left: -45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ED2920;
				border-radius: 50%;
				font-size: 28rpx;
				color: #fff;
				font-weight: 500;
			}
		}
	}
</style>